<!-- small house card -->
<template>
  <view
    class="recommend-house-main"
    @tap="goToDetailPage(item)"
    :style="cardOpacity"
  >
    <view class="sHouseCardImg" :style="cardPhoto">
      <view class="top-left-tag" v-if="tagValue" :style="tag_bgColor">
        {{ tagValue + (TESTING ? item.id : '') }}
      </view>
    </view>
    <view class="right-content">
      <view class="title">{{ item.title }}</view>
      <view class="details">
        {{ item.house_area }}㎡/{{ item.house_direction }}/{{
          item.house_floor_type
        }}
      </view>
      <view class="tags-wrapper">
        <view
          class="tag"
          v-if="item.sell_label && index < 2 && tag"
          v-for="(tag, index) in item.sell_label"
          :key="index"
          >{{ tag }}</view
        >
      </view>
      <view class="price" :style="priceTextStyle">
        <view class="left-price">
          <view v-if="tagValue === '售'" class="cn-unit">
            {{ item.house_sell_price | tenMillion }}
            <text v-if="item.house_sell_price > 10000">万</text>元
          </view>
          <view v-else class="cn-unit">
            {{ item.house_price | tenMillion }}
            <text v-if="item.house_price > 10000">万</text>元/月
          </view>
        </view>
        <!--        <view class="right-price">水电费: {{item.utility_fee}}</view>-->
        <view class="right" v-if="offShelf">已下架</view>
      </view>
    </view>
  </view>
</template>

<script>
import { filter } from '../util/reuse/filter';
import { ROUTER_OBJ, uniNavigate, uniShowToast } from '../util/misc';
import { uniSetStorageSync } from '../util/funcs';
import { TESTING } from '../util/test';
import { houseCardMixin } from '../util/reuse';


export default {
  mixins: [filter, houseCardMixin],
  props: {
    orderStatus: {
      default() {
        return '';
      },
    },
    item: {
      type: Object,
      required: true,
      default() {
        return {
          id: 1,
          title: 'await',
          details: '185.2㎡/东南/高楼层  共30层',
          tags: [
            {
              content: '满五年',
            },
            {
              content: '随时看房',
            },
          ],
          rentPrice: 25800,
          waterElectricityFee: 5000,
          build_price: 0,
          house_price: 0,
          // from api
          build_area: 'await', // 面积
          build_floor: '',
          build_birth: '',
          province: '',
          city: '',
          area: '',
          build_thumb: [],
          house_thumb: [],
          house_direction: '北北', //房屋朝向
          house_floor_type: '未设楼层',
          utility_fee: '-5',
        };
      },
    },
    tagValue: {
      // 判断要显示的价格, 还有右上角要显示什么
      type: String,
    },
    canGoDetail: {
      type: Boolean,
      default() {
        return true;
      },
    },

    offShelf: {
      default() {
        return false;
      },
    },
  },
  data() {
    return {
      displayBuildMode: false,
      TESTING: TESTING,
    };
  },
  mounted() {
    this.displayBuildMode = !!this.item.build_id; // !!就是将所有其他类型都转换成boolean型
  },

  computed: {
    thumbImage() {
      if (this.item.house_thumb) {
        return this.item.house_thumb[0];
      }
    },
  },
  methods: {
    goToDetailPage(item) {
      if (!this.canGoDetail || !this.item.id || this.offShelf) {
        if (this.offShelf) uniShowToast('当前房源已下架, 请您重新选择', false);
        return;
      }
      console.log(item);
      // return
      uniSetStorageSync('ROUTER_OBJ', {
        ...item,
        showSellPrice: this.tagValue !== '租',
      });
      let ROUTER_OBJ = JSON.stringify({
        ...item,
        showSellPrice: this.tagValue !== '租',
      });
      uniNavigate(`/displayDetails/displayDetails?obj=${ROUTER_OBJ}`)
      
    },
  },
};
</script>

<style scoped lang="scss">
@import '../assets/styles/global';

.recommend-house-main {
  @include borderBox;
  display: flex;
  padding: 8px;
  margin: 10px 0;
  width: 692rpx;
  height: 224rpx;
  /*height: 400rpx;*/
  background-color: #ffffff;
  /*background-color: red;*/
  box-shadow: 0px 0px 6px 0px rgba(186, 157, 97, 0.13);
  border-radius: 10px;

  .sHouseCardImg {
    margin-right: 10px;
    position: relative;
    border-radius: 1vw;
    background-color: black;
    width: 252rpx;
    height: 188rpx;
    @include cover-no-repeat-center;

    .top-left-tag {
      @include center;
      width: 35px;
      height: 18px;
      border-radius: 1vw;
      background-color: #e45a5a;
      color: white;
      font-size: 11px;
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  .right-content {
    position: relative;
    width: 408rpx;
    height: 222rpx;
    display: flex;
    flex-direction: column;

    .title {
      width: 100%;
      @include ellipsis;
      height: 40rpx;
      font-size: 32rpx;
      line-height: 40rpx;
      color: #06121f;
      margin-bottom: 12rpx;
    }

    .details {
      width: 100%;
      height: 32rpx;
      font-size: 24rpx;
      font-weight: normal;
      font-stretch: normal;
      line-height: 32rpx;
      letter-spacing: 0;
      color: #8c9198;
      margin-bottom: 8rpx;
    }

    .tags-wrapper {
      /*position: relative;*/
      display: flex;
      margin-bottom: 16rpx;
      height: 37rpx;

      .tag {
        &:first-child {
          margin-left: 0;
        }

        margin-left: 16rpx;
        max-width: 160rpx;
        padding: 2rpx 10rpx;
        height: 36rpx;
        background-color: #edf1f4;
        border-radius: 4rpx;
        @include center;
        font-size: 22rpx;
        letter-spacing: 0px;
        color: #969799;
        @include myEllipsis;
      }
    }

    .price {
      position: relative;
      @include center;
      justify-content: space-between;

      .left-price {
        height: 32rpx;
        font-size: 32rpx;
        line-height: 32rpx;
        font-weight: bold;
        max-width: 200rpx;
        /*background-color: orange;*/
        @include myEllipsis;

        .cn-unit {
          font-weight: normal;
        }
      }

      .right-price {
        height: 16px;
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 0;
        color: #8c9198;
      }
      .right {
        @include center;
        right: 0;
        /*bottom: 20rpx;*/
        width: 80rpx;
        height: 45rpx;
        background-color: grey;
        position: absolute;
        border-radius: 4rpx;
        font-size: 22rpx;
        letter-spacing: 0rpx;
        color: white;
      }
    }
  }
}
</style>
